<!-- 
* @desc:事件管理弹窗
* @fileName:EventSetOperation.vue
* @author:chenxiaofeng@yzbdl.ac.cn
* @date:2022-5-26
!-->
<script setup lang="ts">
import { reactive, ref } from "vue";
// const props = defineProps({
// });
const eventData = reactive({
  eventSetData: [
    {
      id: 1,
      source: "集群",
      event: "CPU警告",
      trigger: "集群CPU占用率保持xxxx,请知悉！",
    },
    {
      id: 2,
      source: "集群",
      event: "内存警告",
      trigger: "集群CPU占用率保持xxxx,请知悉！",
    },
    {
      id: 3,
      source: "服务器",
      event: "CPU警告",
      trigger: "集群CPU占用率保持xxxx,请知悉！",
    },
    {
      id: 4,
      source: "服务器",
      event: "内存警告",
      trigger: "集群CPU占用率保持xxxx,请知悉！",
    },
    {
      id: 5,
      source: "执行器",
      event: "任务成功率低告警",
      trigger: "集群CPU占用率保持xxxx,请知悉！",
    },
  ],
  startInput: false,
  endInput: false,
});
const num1 = ref("5:00");
const num2 = ref("80");
</script>

<template>
  <div class="operation">
    <!-- 事件管理弹窗内容 -->
    <div class="page-details">
      <el-table :data="eventData.eventSetData" stripe style="width: 100%">
        <el-table-column prop="source" label="事件源" width="100px" />
        <el-table-column prop="event" label="事件" width="140px" />
        <el-table-column prop="trigger" label="触发条件">
          <template #default="scope">
            <div v-if="scope.row.id === 1">
              集群CPU占用率保持<span
                v-show="!eventData.startInput"
                class="start"
                @click="eventData.startInput = true"
                >{{ num1 }}</span
              ><el-input
                class="number"
                v-show="eventData.startInput"
                v-model="num1"
                @blur="eventData.startInput = false"
              />超时<span
                v-show="!eventData.endInput"
                class="end"
                @click="eventData.endInput = true"
                >{{ num2 }}%</span
              ><el-input
                class="number"
                v-show="eventData.endInput"
                @blur="eventData.endInput = false"
                v-model="num2"
              />,请知悉
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<style>
.el-dialog__header {
  border-bottom: 1px solid #dedede;
  margin-right: 0;
}
</style>
<style scoped lang="scss">
.number {
  width: 100px;
  display: inline-block;
}
.start,
.end {
  text-decoration: underline;
  cursor: pointer;
  color: #5473e6;
}
</style>
